<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,
            initial-scale=1.0,
            maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link type="text/css" rel="styleSheet" href="../css/title.css" />
    <link type="text/css" rel="styleSheet" href="../css/main.css" />
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
    <div class="title">
        <div class="title1">
            <div class="title1_m">
                <div class="title1_left">
                    <ul>
                        <li><i class="iconfont" style="color: steelblue">&#xe64f;</i>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                    </ul>
                </div>
                <div class="title1_push">
                    <a style="text-decoration:none;font-size: 14px;background-color: #f45a8d;color: white;border-radius: 0px 0px 6px 6px;" href="">投稿</a>
                </div>
                <div class="title1_right">
                    <ul>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                        <li>选项</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="title_m">
            <div class="title_left"></div>
            <div class="title_right">
                <div style="height: 32px;width: 68px;border-radius: 4px;background-color: hsla(0,0%,100%,.88);box-shadow: 0 1px 2px rgba(0, 0, 0, .1);float: left">
                    <a class="search_rank" href=""><span><i class="iconfont">&#xe607;</i>排行榜</span></a></div>
                <input class="search_input" type="text" placeholder="  搜索">
                <button class="search_button" type="submit"><i style="color: #00a4db"
                        class="iconfont">&#xe60e;</i></button>
            </div>
        </div>
        <div style="background-color: white">
            <div class="title_kind">
                <ul>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe608;</i></div>
                        <div class="title_kind_name">
                            动画
                            <div class="title_kind_name_show">
                                <ul>
                                    <li>选项</li>
                                    <li>选项</li>
                                    <li>选项</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">动画</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe653;</i></div>
                        <div class="title_kind_name">专栏</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe697;</i></div>
                        <div class="title_kind_name">广场</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe75c;</i></div>
                        <div class="title_kind_name">直播</div>
                    </li>
                    <li>
                        <div class="title_kind_icon"><i class="iconfont_kind">&#xe6a3;</i></div>
                        <div class="title_kind_name">小黑屋</div>
                    </li>
                    <li>
                        <div style="margin-left: 40px"><img src="../jpg/title_top_right.gif" alt=""></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="main_top">
        <div class="main_top_left">
            <img class="troggle" style="width: 440px;height:220px" src="../jpg/top_left.webp" alt="">
        </div>
        <div class="main_top_right">
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius:6px;"></div>
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius: 6px"></div>
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius: 6px"></div>
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius: 6px"></div>
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius: 6px"></div>
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius: 6px"></div>
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius: 6px"></div>
            <div class="main_top_right_radio"><img src="../jpg/tree.jpg" height="100px" width="160px" style="border-radius: 6px"></div>
        </div>
    </div>
    <div class="promotion">
        <div class="promotion_title">
            <span style="font-size: 30px"><i class="iconfont">&#xe804;</i>推广</span>
            <a style="margin-left: 10px;color: #99a2aa;" href="">万份小龙虾任性送</a>
            <span><i class="iconfont">&#xe63a;</i></span>
            <a style="color: #99a2aa;" href="">变形兄弟</a>
            <div class="promotion_title_right">
                <div class="promotion_title_right_more"><span style="font-size: 12px">&nbsp&nbsp&nbsp更多></span></div>
                <div class="promotion_title_right_refresh"><span style="font-size: 12px"><i
                            class="iconfont">&#xe610;</i>1000条新动态</span></div>
            </div>
        </div>
        <div class="promotion_online">
            <div style="margin-top: 8px;margin-left: 5px">
                <a style="margin-left: 10px;color: #99a2aa;" href="">在线人数：1000000</a>
                <span><i class="iconfont">&#xe63a;</i></span>
                <a style="color: #99a2aa;" href="">最新投稿：10000</a></div>
        </div>
        <div class="promotion_main">
            <div class="promotion_main_video"><img src="../jpg/tree.jpg" alt="">
                <p class="promotion_main_video_p">shfjshfjsijfisif</p>
            </div>
            <div class="promotion_main_video"><img src="../jpg/tree.jpg" alt="">
                <p class="promotion_main_video_p">wefsfwef</p>
            </div>
            <div class="promotion_main_video"><img src="../jpg/tree.jpg" alt="">
                <p class="promotion_main_video_p">fwefsfaawe</p>
            </div>
            <div class="promotion_main_video"><img src="../jpg/tree.jpg" alt="">
                <p class="promotion_main_video_p">wefsf</p>
            </div>
            <div class="promotion_main_video"><img src="../jpg/tree.jpg" alt="">
                <p class="promotion_main_video_p">fewfsfsgssfs</p>
            </div>
        </div>
        <img src="../jpg/promotion_right.jpg" alt="" class="promotion_right">
    </div>
    <div class="main">
        <div class="main_left">
            <div class="main_left_title">
                <div class="main_left_title_left">
                    <a style="float: left;font-size: 30px;color: black" href=""><i class="iconfont">&#xe64e;</i>正在直播</a>
                    <p style="float: left;margin-left: 15px">当前共有1000个直播</p>
                    <a style="float: left;margin-top: 16px;margin-left: 15px;color: black" href=""><i
                            class="iconfont">&#xe737;</i>这个火了!</a>
                </div>
                <div class="main_left_title_right">
                    <div class="main_left_title_right_more"><span style="font-size: 12px">>更多</span></div>
                    <div class="main_left_title_right_refresh"><span style="font-size: 12px"><i
                                class="iconfont">&#xe610;</i>1000条新动态</span></div>

                </div>
            </div>
            <div class="main_left_video">
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">2725854227</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">7825727</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">72727</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">72728727</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">72872872727</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">782722727</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">sefwsf</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">sdfsfse</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">csessc</p>
                </div>
                <div class="main_left_video_list">
                    <img src="../jpg/tree.jpg" alt="">
                    <p class="main_left_video_list_p">ewscsce</p>
                </div>
            </div>
        </div>
        <div class="main_right">
            <div class="main_right_title">
                <div class="main_right_title_tab1">直播排行</div>
                <div class="main_right_title_tab2">关注的主播</div>
                <div class="main_right_title_tab3">为你推荐</div>
            </div>
            <div class="main_right_list1">
                <div class="main_right_list1_item">
                    <span style="margin-right: 5px"><i style="float: left" class="iconfont">&#xe641;</i></span>
                    <a href=""><img src="../jpg/head.webp" alt=""></a>
                    <div class="main_right_list1_item_right">
                        <div class="main_right_list1_item_right_top">
                            <span style="font-size: 12px">黑桐谷歌</span>
                            <span style="font-size: 12px;float: right;margin-top: 5px;color: #99a2aa">21.0w</span>
                            <i style="float: right;margin-top: 5px;color: #99a2aa;" class="iconfont">&#xe638;</i>
                        </div>
                        <div class="main_right_list1_item_right_down">怪物猎人:世界</div>
                    </div>
                </div>
                <div class="main_right_list1_item">
                    <span style="margin-right: 5px"><i style="float: left" class="iconfont">&#xe641;</i></span>
                    <a href=""><img src="../jpg/head.webp" alt=""></a>
                    <div class="main_right_list1_item_right">
                        <div class="main_right_list1_item_right_top">
                            <span style="font-size: 12px">黑桐谷歌</span>
                            <span style="font-size: 12px;float: right;margin-top: 5px;color: #99a2aa">21.0w</span>
                            <i style="float: right;margin-top: 5px;color: #99a2aa;" class="iconfont">&#xe638;</i>
                        </div>
                        <div class="main_right_list1_item_right_down">怪物猎人:世界</div>
                    </div>
                </div>
                <div class="main_right_list1_item">
                    <span style="margin-right: 5px"><i style="float: left" class="iconfont">&#xe641;</i></span>
                    <a href=""><img src="../jpg/head.webp" alt=""></a>
                    <div class="main_right_list1_item_right">
                        <div class="main_right_list1_item_right_top">
                            <span style="font-size: 12px">黑桐谷歌</span>
                            <span style="font-size: 12px;float: right;margin-top: 5px;color: #99a2aa">21.0w</span>
                            <i style="float: right;margin-top: 5px;color: #99a2aa;" class="iconfont">&#xe638;</i>
                        </div>
                        <div class="main_right_list1_item_right_down">怪物猎人:世界</div>
                    </div>
                </div>
                <div class="main_right_list1_item">
                    <span style="margin-right: 5px"><i style="float: left" class="iconfont">&#xe641;</i></span>
                    <a href=""><img src="../jpg/head.webp" alt=""></a>
                    <div class="main_right_list1_item_right">
                        <div class="main_right_list1_item_right_top">
                            <span style="font-size: 12px">黑桐谷歌</span>
                            <span style="font-size: 12px;float: right;margin-top: 5px;color: #99a2aa">21.0w</span>
                            <i style="float: right;margin-top: 5px;color: #99a2aa;" class="iconfont">&#xe638;</i>
                        </div>
                        <div class="main_right_list1_item_right_down">怪物猎人:世界</div>
                    </div>
                </div>
                <div class="main_right_list1_item">
                    <span style="margin-right: 5px"><i style="float: left" class="iconfont">&#xe641;</i></span>
                    <a href=""><img src="../jpg/head.webp" alt=""></a>
                    <div class="main_right_list1_item_right">
                        <div class="main_right_list1_item_right_top">
                            <span style="font-size: 12px">黑桐谷歌</span>
                            <span style="font-size: 12px;float: right;margin-top: 5px;color: #99a2aa">21.0w</span>
                            <i style="float: right;margin-top: 5px;color: #99a2aa;" class="iconfont">&#xe638;</i>
                        </div>
                        <div class="main_right_list1_item_right_down">怪物猎人:世界</div>
                    </div>
                </div>
                <div class="main_right_list1_item">
                    <span style="margin-right: 5px"><i style="float: left" class="iconfont">&#xe641;</i></span>
                    <a href=""><img src="../jpg/head.webp" alt=""></a>
                    <div class="main_right_list1_item_right">
                        <div class="main_right_list1_item_right_top">
                            <span style="font-size: 12px">黑桐谷歌</span>
                            <span style="font-size: 12px;float: right;margin-top: 5px;color: #99a2aa">21.0w</span>
                            <i style="float: right;margin-top: 5px;color: #99a2aa;" class="iconfont">&#xe638;</i>
                        </div>
                        <div class="main_right_list1_item_right_down">怪物猎人:世界</div>
                    </div>
                </div>
            </div>
            <div class="main_right_list2">
                <div class="main_right_list2_span">
                    <span class="main_right_list2_span"><i class="iconfont">&#xe64f;</i>没有数据(-_-#)</span>
                </div>
            </div>
            <div class="main_right_list3">
                <div class="main_right_list3_top"><img src="../jpg/main_right_list2_top.webp" alt="" class="main_right_list2_top_img"></div>
                <div class="main_right_list3_down"><img src="../jpg/main_right_list2_top_xiangce.png" alt=""><img src="../jpg/main_right_list2_top_xiaoshipin.png" alt=""></div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function() {
        loadMain();
        $(".title_kind_name").hover(
            function() {
                $(".title_kind_name_show").slideDown();
            },
            function() {
                $(".title_kind_name_show").slideUp();
            }
        )
        $(".main_right_title_tab1").click(function() {
            $(".main_right_list1").show();
            $(".main_right_list2").hide();
            $(".main_right_list3").hide();
            $(".main_right_title_tab1").css("color", "aqua");
            $(".main_right_title_tab2").css("color", "black");
            $(".main_right_title_tab3").css("color", "black");
        });
        $(".main_right_title_tab2").click(function() {
            $(".main_right_list1").hide();
            $(".main_right_list2").show();
            $(".main_right_list3").hide();
            $(".main_right_title_tab2").css("color", "aqua");
            $(".main_right_title_tab1").css("color", "black");
            $(".main_right_title_tab3").css("color", "black");
        });
        $(".main_right_title_tab3").click(function() {
            $(".main_right_list1").hide();
            $(".main_right_list2").hide();
            $(".main_right_list3").show();
            $(".main_right_title_tab3").css("color", "aqua");
            $(".main_right_title_tab1").css("color", "black");
            $(".main_right_title_tab2").css("color", "black");
        });
        $(".troggle").click(function() {
            $(".troggle").toggle();
        });
    });

    function loadMain() {
        $(".main_right_list2").hide();
        $(".main_right_list3").hide();
        $(".main_right_title_tab1").css("color", "aqua");
        $(".title_kind_name_show").hide();
    }
</script>

</html>